import React, { Component } from 'react';
import { connect } from 'dva';
import getUrlParam from '@/utils/getUrlParam';
import styles from './bScore.less';
import { Rate } from 'antd';
import initChart from '@/utils/initChart';
import { getBChartOption } from '@/utils/warning-figure-chart.js';

@connect(({ bscore }) => ({
  bScoreData: bscore.bScoreData,
}))
class bScore extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'bscore/getbScoreData',
      payload: {
        stock_code: getUrlParam('secu_code') || '000001',
      },
    });
  }

  render() {
    let { bScoreData } = this.props;

    let scoreObj = {};
    if (bScoreData && bScoreData.data && document.getElementById('mychart')) {
      // console.log(bScoreData);
      initChart(getBChartOption(bScoreData.data.charts[0].data[0].data, 'overall'), 'mychart');
      scoreObj = bScoreData.data.scores;
      // let myChart = echarts.init(document.getElementById('mychart'));
      // myChart.getOption();
      // myChart.setOption(chartOption);
    }

    let getText = () => {
      let result = '';
      return result;
      // console.log(bScoreData);
      if (bScoreData.desc) {
        result = bScoreData.desc.text;
      }
      return result;
    };
    // if(chartOption){
    //   // myChart.setOption(chartOption);
    // }

    return (
      <div className={styles.exoticWrap}>
        <div className={[styles.commonScore, 'clearfix'].join(' ')}>
          <div className={styles.scoreCard}>
            <img src={require('./images/01.png')} />
            <dl>
              <dt>综合评分</dt>
              <dd className={styles.score}>{scoreObj.overallScore}</dd>
              <Rate value={(scoreObj.overallScore / 100) * 5} />
            </dl>
          </div>
          <div className={styles.scoreCard}>
            <img src={require('./images/02.png')} />
            <dl>
              <dt>本期评分</dt>
              <dd className={styles.score}>{scoreObj.thisScore}</dd>
              <Rate value={(scoreObj.thisScore / 100) * 5} />
            </dl>
          </div>
          <div className={styles.scoreCard}>
            <img src={require('./images/03.png')} />
            <dl>
              <dt>行业排名</dt>
              <dd className={styles.score}>{scoreObj.rank}</dd>
            </dl>
          </div>
          <div className={styles.scoreCard}>
            <img src={require('./images/04.png')} />
            <dl>
              <dt>区域排名</dt>
              <dd className={styles.score}>{scoreObj.province_rank}</dd>
            </dl>
          </div>
        </div>

        <div className={[styles.middleChartWrap, 'clearfix'].join(' ')}>
          <div id="chart-wrapper" className={[styles.chartWrapper, 'fl'].join(' ')}>
            <div id="mychart" className={styles.mychart} />
          </div>

          <div className={[styles.quotaDesc, 'fr', styles.blockWrap].join(' ')}>
            <div className={[styles.cardHead, styles.blockHead].join(' ')}>
              <p>指标解释</p>
            </div>
            <div className={styles.blockBody}>
              <p>字段缺失</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default bScore;
